<meta charset="UTF-8">
<div id="all-alarm">
    <div class="report-item-header">
        <Row style="margin:10px;height: 32px;">
            <div class="fl">
                <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
            </div>
            <div style="position: relative;width: 240px;" class="fl">
                <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                    <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" :placeholder="placeholder" @on-click="onClickIcon"></i-input>
                    <transition name="fade">
                        <div class="search-item-wrapper" v-show="isShowMatchDev">
                            <ul id="ztree" class="ztree"></ul>
                        </div>
                    </transition>
                </div>
            </div>
            <div style="margin-left:10px;" class="fl">
                {{$t("reportForm.selected")}}: <span v-text="selectedCount"></span>
            </div>
            <div style="margin-left:10px;" class="fl">
                <i-button @click="alarmModel = true">{{$t("reportForm.selectAlarmType")}}({{needalarmCount}})</i-button>
            </div>
            <div style="margin-left:10px;" class="fl">
                <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
            </div>
            <div style="margin-left:10px;" class="rt">
                <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
            </div>
        </Row>
        <div style="margin:10px;">
            <i-table ref="table" :columns="alarmColumns" size="small" :height="tableHeight" :data="alarmData" :loading="loading"></i-table>
        </div>
    </div>

    <Modal v-model="alarmModel" width="600">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>{{$t('alarm.filterAlarmTitle')}}</span>
        </p>
        <div>
            <div>
                <i-input v-model.trim="searchValue" icon="ios-close-circle-outline" style="width:100%;" :placeholder='$t("alarm.searchValuePlaceholder")' @on-click="searchValue=''"></i-input>
            </div>
            <div style="overflow:hidden;margin-top:12px;" @click="checkingSelectState">
                <div style="width:33.33%;float:left;padding:2px 0;" v-for="(item,index) in alarmTypeList" :key="index" v-show="item.show">
                    <Checkbox v-model="checkboxObj[item.index]">{{ isZh ? item.alarmname : item.alarmnameen}}</Checkbox>
                </div>
            </div>
        </div>
        <div slot="footer">
            <Row>
                <i-col span="21">
                    <i-button type="primary" @click="setForceAlarmClick" style="width: 100%">{{$t("monitor.confirm")}}</i-button>
                </i-col>
                <i-col span="3" style="text-align: center;line-height: 32px;" @click.native="onCheckAll">
                    <Checkbox :value="checkAll">{{isZh ? '全选' :'All'}}</Checkbox>
                </i-col>
            </Row>
        </div>
    </Modal>
</div>